<template>
  <div class="allthis">
    <div class="header-bd">
      <a class="placeholder">
        <span class="text iconfont icon-search">寻找宝贝店铺</span>
      </a>
    </div>
    <div class="middle">
      <!-- <tr v-for="(item, index) in typeTime" :key="index">
        <span>{{item}}</span>
      </tr>
      <span>main:{{msg}}</span> -->
      <router-view/>
    </div>

    <div class="toolbar">
      <span>1</span>
      <span @click="toMenu('/Main/map')">地图</span>
      <span @click="toMenu('/Main/student')">我的学员</span>
      <span @click="toMenu('/Main/detail2')">拖动SPAN</span>
      <span @click="toMenu('/Main/schedule')">课表</span>
      <span @click="toMenu('/Main/detail1')">拖动DIV</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Main',
  methods: {
    toMenu (url) {
      console.log('===toMenu===' + url)
      this.$router.push(url)
    }
  },
  beforeMount () {
    console.log('beforeMount=========')
  },
  mounted () {
    console.log('121212mounted==Main=============================')
  },
  computed: {
  },
  data () {
    return {
      msg: '111Welcome to Your Vue.js App',
      num: 0
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header-bd {
    width: 100%;
    height: 40px;
    position:fixed;
    top: 0px;
    text-align:center;
    /* padding-right: 9px;
    padding-left: 42px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-size: 27px 20px; */
    background-repeat: no-repeat;
    background-position: 9px center;
    background-color: rgba(136, 57, 37, 0.404);
    left: 0;
    align-items: center;
    /* display:inline-flex; */
    /* bottom: 0; */
  }
  .toolbar {
    height: 40px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1001;
    background-color: #bd8216;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #f8f8f8;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 20px;
    padding-top: 2px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .head123 {
    width: 100%;
    padding-right: 9px;
    padding-left: 42px;
    padding-top: 6px;
    padding-bottom: 6px;
    /* background-image: url(…wbqnjl3BeayIl1CJspHfQ8JeTyS5Rn4AbLdSp9jXdwnwkwAGXl2KVI+BEMAAAAAElFTkSuQmCC); */
    background-size: 27px 20px;
    background-repeat: no-repeat;
    background-position: 9px center;
  }
  .middle {
      min-height: 80%;
      position:relative;
      top:30px;
      width: 100%;
      height: 100%;
      background-color: rgba(250, 248, 248, 0.404);
  }
  .image123 {
    width: 100%;
    height: 100%;
    background-color: rgb(244, 244, 244);
  }
  .title{
    height:50px;
  }
  .title span{
    width: 100px;
    height: 50px;
    background-color:#666;
    display: inline-block;
    line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
    text-align:center;
  }
  .content .list{
    width: 500px;
    height: 300px;
    background-color: palevioletred;
    display: none;
  }
  .content .active{
    display: block;
  }

  .title .current{
    background-color: palevioletred;
  }
</style>
